<template>
<div class="product">
	<el-card class="box-card" shadow="always">
	  <div slot="header" class="clearfix" style="display: flex; justify-content: center;">
	    <span style="font-weight: bold;">{{ product.name }}</span>
	  </div>

		<div class="product-wrapper">
			<el-card class="box-card" shadow="always" style="width: 240px">
        <el-image
          v-if="product.fromUrl"
          :src="product.imgPath"
          fit="fill">
        </el-image>
        <el-image
          v-else
          :src="product.imgPath && require('@/assets/img/product/' + product.imgPath)"
          fit="fill">
        </el-image>
			</el-card>

			<div class="product-info">
				<p>商城价：<span class="price">￥{{ product.price }}.00</span></p>
				<p>邮递方式：<span class="express">圆通快递</span></p>
				<p>热卖程度：<i class="el-icon-star-off" v-for="i in 5"></i></p>
				<p>库存：{{ product.stock }}</p>
				<p>购买数量：
					<el-input-number v-model="purchase" :min="1" :max="product.stock" size="small" label="purchase"></el-input-number>
				</p>
				<div class="buttons">
					<el-button type="primary" icon="el-icon-check" @click="buy" round>购买</el-button>
  				<el-button type="success" icon="el-icon-shopping-cart-2" @click="add_to_cart" round>放入购物车</el-button>
				</div>
			</div>


			<el-card class="box-card product-detail-card" shadow="none">
				<div slot="header" class="clearfix">
			    <span style="font-weight: bold;">商品详情</span>
			  </div>
			  <p class="product-detail">{{ product.description }}</p>
			</el-card>
		</div>
	</el-card>
</div>
</template>

<script>
export default {
	name: "Product",
	created() {
		this.userInfo = this.$store.getters.getUser;
		const _this = this;
		_this.$axios.get("/product/" + this.$route.params.id).then((res) => {
			const resData = res.data.data;
      let imgPath = resData.imgPath;
      let fromUrl = false;
      if (imgPath.slice(0, 4) === "http") {
        fromUrl = true;
      }
			_this.product = {
				id: resData.id,
				name: resData.name,
				description: resData.description,
				price: resData.price,
				stock: resData.stock,
				species_id: resData.pcId,
				brand_id: resData.pcChildId,
        imgPath: imgPath,
        fromUrl: fromUrl
			};
      _this.$store.commit('ADD_VISITED', _this.product);
		});
	},
	data() {
		return {
			img_url: '#',
			product: {
			},
			purchase: 1,
			userInfo: null
		}
	},
	methods: {
		add_to_cart() {
      let _this = this;
      if (this.userInfo === null) {
        _this.$message({
          message: '请先登录！',
          type: 'warning'
        });
		    this.$router.push("/login");
		    return;
      }
			const item = {
				productId: this.product.id,
				productName: this.product.name,
				productImgPath: this.product.imgPath,
				productPrice: this.product.price,
				purchaseQuantity: this.purchase,
				productStock: this.product.stock,
				userId: this.userInfo.id
			};
      console.log(item);
      this.$axios.post("/shopping-cart/add-item", item).then((res) => {
				_this.$message({
	        message: '已放入购物车！',
	        type: 'success'
	      });
			});
		},
		buy() {
      let _this = this;
      if (this.userInfo === null) {
        _this.$message({
          message: '请先登录！',
          type: 'warning'
        });
        this.$router.push("/login");
        return;
      }
			const item = {
				productId: this.product.id,
				productName: this.product.name,
				productImgPath: this.product.imgPath,
				productPrice: this.product.price,
				purchaseQuantity: this.purchase,
				productStock: this.product.stock,
				userId: this.userInfo.id
			};
			this.$axios.post("/shopping-cart/add-item", item).then((res) => {
				_this.$message({
	        message: '已放入购物车！',
	        type: 'success'
	      });
	      this.$router.push({ name: 'cart'});
			});
		}
	}
}
</script>

<style scoped>
.product {
	width: 80%;
}

.product-wrapper {
	display: flex;
	justify-content: space-between;
}

.product-info {
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-info p {
	line-height: 30px;
}

.price {
	line-height: 22px; 
	width: 160px; 
	font-size: 16px; 
	color: #d44; 
	font-weight: 900;
}

.express {
	color: #f44; 
}

.buttons {
	display: flex;
}

.product-detail-card {
	width: 500px;
}

.product-detail {
	line-height: 25px;
}
</style>